<template>
  <div class="n-input __input-m n-input--pair">
    <template v-for="(item, index) in options" :key="index">
      <div class="n-input-wrapper">
        <div class="n-input__input">
          <input class="n-input__input-el" v-model="item.value" placeholder="请输入姓名" />
          <div class="n-input__placeholder">
            <span>{{ item.label }}</span>
          </div>
        </div>
      </div>
      <span class="n-input__separator" v-if="index + 1 < options.length">-</span>
    </template>
    <div class="n-input__border"></div>
  </div>
</template>
<script lang="ts" setup>
defineProps<{
  holder: string[]
}>()
const pair = defineModel<Array<string>>()
const options = ref()

watch(
  () => pair.value,
  (val) => {
    console.log(val)
    if (!val) {
      options.value = [{ label: '几时', value: null }]
    }
  },
  {
    immediate: true,
    deep: true,
  },
)
</script>
<style lang="scss" scoped>
.input-group {
  @apply flex;
  border: var(--n-border);
}
</style>
